<template>
<div >
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="logo-area">
        <div class="logo">
          <svg viewBox="0 0 24 24">
            <path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
          </svg>
        </div>
        <div class="title">拱墅区审计局<span>AI智能审计平台</span></div>
      </div>
      
      <div class="header-right">
        <!-- 项目选择器 -->
         <el-cascader
          v-model="selectedProject"
          :options="projects"
          :props="cascaderProps"
          placeholder="请选择项目"
          @change="handleProjectChange"
          style=""
        ></el-cascader>
        <!-- <el-select 
          v-model="currentProject" 
          placeholder="请选择项目" 
          class="project-selector"
          filterable
        >
          <el-option 
            v-for="project in projects" 
            :key="project.id" 
            :label="project.projectName" 
            :value="project.id"
          >
            <div style="display: flex; align-items: center;">
              <i class="el-icon-folder" style="color: #409EFF; margin-right: 8px;"></i>
              <span>{{ project.projectName }}</span>
              <el-tag v-if="project.parentId === 0" size="mini" type="primary" style="margin-left: 10px;">根项目</el-tag>
            </div>
          </el-option>
        </el-select> -->
        
        <!-- 用户信息 -->
        <div class="user-info">
          <div class="user-avatar">审</div>
          <div class="user-name">审计员</div>
        </div>
      </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-container">
      <!-- 欢迎卡片 -->
      <div class="welcome-card fade-in">
        <div class="welcome-title">欢迎回来，审计员！</div>
        <!-- <div class="welcome-subtitle">今天是 {{ currentDate }}，您有 {{ pendingTodosCount }} 个待办事项需要处理，请及时查看和处理。</div> -->
        <div class="welcome-subtitle">今天是 {{ currentDate }}，您暂无待办事项需要处理。</div>

      </div>
      
      <!-- 数据概览 -->
      <!-- <div class="dashboard-stats">
        <div class="stat-card fade-in delay-1">
          <div class="stat-icon icon-project">
            <i class="el-icon-folder"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">进行中的项目</div>
            <div class="stat-value">{{ projects.length }}</div>
          </div>
        </div>
        
        <div class="stat-card fade-in delay-2">
          <div class="stat-icon icon-todo">
            <i class="el-icon-s-order"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">待办事项</div>
            <div class="stat-value">{{ pendingTodosCount }}</div>
          </div>
        </div>
        
        <div class="stat-card fade-in delay-3">
          <div class="stat-icon icon-notice">
            <i class="el-icon-bell"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">未读通知</div>
            <div class="stat-value">{{ unreadNoticesCount }}</div>
          </div>
        </div>
        
        <div class="stat-card fade-in delay-4">
          <div class="stat-icon icon-app">
            <i class="el-icon-apps"></i>
          </div>
          <div class="stat-content">
            <div class="stat-title">可用应用</div>
            <div class="stat-value">{{ apps.length }}</div>
          </div>
        </div>
      </div>
       -->
      <!-- 我的应用 -->
      <div class="section-title fade-in">
        <i class="el-icon-apps icon"></i> 我的应用
      </div>
      
      <div class="apps-grid">
        <div 
          v-for="(app, index) in apps" 
          :key="app.id" 
          class="app-card fade-in"
          :class="'delay-' + (index % 5 + 1)"
          @click="openApp(app)"
          v-if="app.show"
        >
          <div class="app-icon">
            <svg :viewBox="app.viewBox">
              <path :d="app.iconPath" fill="#409EFF"></path>
            </svg>
          </div>
          <div class="app-content">
            <div class="app-name">{{ app.name }}</div>
            <div class="app-desc">{{ app.desc }}</div>
          </div>
        </div>
      </div>
      
      <!-- 通知公告和待办事项 -->
      <div class="dashboard-columns">
        <!-- 通知公告 -->
        <div class="panel fade-in delay-1">
          <div class="panel-header">
            <div class="panel-title">
              <i class="el-icon-bell icon"></i> 审计业务全流程
            </div>
            <div class="panel-more">查看更多</div>
          </div>
          <div class="panel-body">
            <div 
              v-for="notice in notices.slice(0, 5)" 
              :key="notice.id" 
              class="notice-item"
              :class="{unread: !notice.read}"
            >
              <div class="notice-title">
                <!-- <i class="el-icon-message-solid icon"></i> {{ notice.title }} -->
                 {{ notice.title }}
              </div>
              <div class="notice-info">
                <div class="notice-time">{{ notice.time }}</div>
                <div class="notice-department">{{ notice.department }}</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 待办事项 -->
        <div class="panel fade-in delay-2">
          <div class="panel-header">
            <div class="panel-title">
              <i class="el-icon-s-order icon"></i> 知识库
            </div>
            <div class="panel-more">查看更多</div>
          </div>
          <div class="panel-body">
            <div 
              v-for="todo in pendingTodos.slice(0, 5)" 
              :key="todo.id" 
              class="todo-item"
            >
              <!-- <el-checkbox 
                v-model="todo.completed" 
                class="todo-checkbox"
                @change="toggleTodo(todo)"
              ></el-checkbox> -->
              <div class="todo-content">
                <div class="todo-title">{{ todo.title }}</div>
                <div class="todo-info">
                  <div class="todo-project">{{ todo.project }}</div>
                  <div class="todo-priority" :class="'priority-'+todo.priority">
                    {{ priorityText[todo.priority] }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 页脚 -->
    <div class="footer fade-in delay-5">
      <p>拱墅区审计局AI智能审计平台 &copy; 2025 | 技术支持: 智慧审计技术中心</p>
      <!-- <p>地址: 杭州市拱墅区审计局 | 电话: 0571-88888888</p> -->
    </div>
  </div>

</template>

<script>

import config from "@/config.js";
export default {
  name: 'dashboard',
  components: {},
  data () {
    return {
      selectedProject:[],
      projects: [
            // {
            //   id: 1,
            //   projectName: '经济责任审计',
            //   description: '经济责任审计',
            //   parentId: 0,
            //   createdAt: '2023-01-15T08:30:00Z',
            //   updatedAt: '2023-06-10T14:20:00Z',
            // },
            // {
            //   id: 7,
            //   projectName: '财政收支审计',
            //   description: '财政收支审计',
            //   parentId: 0,
            //   createdAt: '2023-01-20T10:00:00Z',
            //   updatedAt: '2023-06-15T09:30:00Z',
            //   children: [
            //     {
            //       id: 8,
            //       projectName: '同级审',
            //       description: '同级审',
            //       parentId: 7,
            //       createdAt: '2023-02-25T14:20:00Z',
            //       updatedAt: '2023-05-30T16:40:00Z'
            //     },
            //     {
            //       id: 9,
            //       projectName: '部门预算执行',
            //       description: '部门预算执行',
            //       parentId: 7,
            //       createdAt: '2023-02-25T14:20:00Z',
            //       updatedAt: '2023-05-30T16:40:00Z'
            //     }
            //   ]
            // },
            // {
            //   id: 10,
            //   projectName: '自然资源资产',
            //   description: '自然资源资产',
            //   parentId: 0,
            //   createdAt: '2023-02-05T09:30:00Z',
            //   updatedAt: '2023-06-12T11:20:00Z'
            // }
          ],
      cascaderProps: {
            value: 'id',
            label: 'projectName',
            children: 'children',
            checkStrictly: false,
            emitPath: false, // 只返回最后一级的值
            expandTrigger: 'hover',
            // 自定义节点是否可选
            disabled: (data) => {
              // 如果有children且不为空，则禁用选择（非叶子节点）
              return data.children && data.children.length > 0;
            }
          },
    currentProject: 1,
          apps: [
            { 
              id: 1, 
              name: '审计业务全流程', 
              desc: '审计项目全生命周期管理', 
              show:true,
              viewBox: "0 0 24 24",
              iconPath: "M3,3H21V7H3V3M4,8H20V21H4V8M9.5,11A0.5,0.5 0 0,0 9,11.5V13H15V11.5A0.5,0.5 0 0,0 14.5,11H9.5Z"
            },
            { 
              id: 2, 
              name: '系统配置', 
              desc: '平台参数配置与管理', 
              show:localStorage.getItem('X-Token')=="732327035854262300"?true:false,
              viewBox: "0 0 24 24",
              iconPath: "M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"
            },
            { 
              id: 3, 
              name: '机关办公全场景', 
              desc: '一体化办公解决方案', 
              show:true,
              viewBox: "0 0 24 24",
              // iconPath: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19M17,8.4L13.4,12L17,15.6L15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4Z"
              iconPath: "M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"

            },
            { 
              id: 4, 
              name: '知识库', 
              desc: '审计知识文档管理', 
              show:true,
              viewBox: "0 0 24 24",
              iconPath: "M18,22A2,2 0 0,0 20,20V4C20,2.89 19.1,2 18,2H12V9L9.5,7.5L7,9V2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18Z"
            },
            { 
              id: 5, 
              name: 'AI对话', 
              desc: '智能审计助手', 
              show:true,
              viewBox: "0 0 24 24",
              iconPath: "M12,3C7.79,3 3.7,4.41 0.38,7C4.41,12.06 7.89,16.37 12,21.5C16.08,16.42 20.24,11.24 23.65,7C20.32,4.41 16.22,3 12,3M12,5C15.07,5 18.09,5.86 20.71,7.45L18.32,10.4C14.74,8.57 10.2,8.57 6.6,10.4L4.29,7.44C7.08,5.85 10.04,5 12,5Z"
            },
            // { 
            //   id: 6, 
            //   name: '数据分析', 
            //   desc: '审计数据智能分析', 
            //   viewBox: "0 0 24 24",
            //   iconPath: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z"
            // },
            // { 
            //   id: 7, 
            //   name: '报告生成', 
            //   desc: '智能审计报告生成', 
            //   viewBox: "0 0 24 24",
            //   iconPath: "M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"
            // },
            // { 
            //   id: 8, 
            //   name: '法规库', 
            //   desc: '审计法规查询系统', 
            //   viewBox: "0 0 24 24",
            //   iconPath: "M18.5,10.2L17.21,11.5L12,6.29V7.79L10.79,6.5L9.5,7.79L11.71,10L9.5,12.21L10.79,13.5L12,12.29V13.79L13.5,15.29V17.79L15.21,16.5L16.5,17.79L14.29,20L16.5,22.21L17.79,20.92L19.21,22.21L22,19.21L20.5,17.71L22,16.21L19.79,14L22,11.79L20.79,10.5L19.21,12.09L17.71,10.59V8.09L16.5,6.79L15.21,8.09V9.58L13.5,7.79L12,9.29V5.09L10.5,3.59V2.09L9,3.59L7.5,2.09L6,3.59V5.09L4.5,6.59L3,5.09V8.09L4.5,9.59V11.09L3,12.59V15.59L4.5,17.09V18.59L3,20.09V22.09L4.5,20.59L6,22.09V20.59L7.5,19.09V17.59L9,19.09V18.09L7.5,16.59V15.09L9,13.59V12.09L7.5,10.59V8.09L9,6.59V4.09L10.5,5.59L12,4.09V5.59L13.5,7.09L15,5.59V4.09L16.5,5.59L18,4.09V6.09L16.5,7.59V9.09L18,10.59V12.09L16.5,13.59V15.09L18,16.59V18.59L19.5,17.09L21,18.59V16.59L19.5,15.09V13.59L21,12.09V10.09L19.5,8.59V7.09L21,5.59V3.59L19.5,5.09L18,3.59V5.59L16.5,7.09V8.59L18.5,10.2Z"
            // }
          ],
          notices: [
            {},
            {},
            {},
            {},
            {},
            // { id: 1, title: '关于2023年度审计项目计划的通知', time: '2023-08-15', department: '审计局办公室', read: false },
            // { id: 2, title: '审计业务培训会通知', time: '2023-08-12', department: '人事教育处', read: true },
            // { id: 3, title: '审计信息化平台升级公告', time: '2023-08-10', department: '信息技术处', read: false },
            // { id: 4, title: '审计项目质量检查结果通报', time: '2023-08-05', department: '法规处', read: true },
            // { id: 5, title: '关于启用新审计文书格式的通知', time: '2023-07-28', department: '综合处', read: true }
          ],
          todos: [
            {},
            {},
            {},
            {},
            {},
            // { id: 1, title: '完成财政预算执行审计报告初稿', project: '财政预算执行审计', priority: 'high', completed: false },
            // { id: 2, title: '审核2023年第二季度审计项目进度', project: '政府投资项目审计', priority: 'medium', completed: false },
            // { id: 3, title: '提交经济责任审计取证单', project: '经济责任审计', priority: 'high', completed: false },
            // { id: 4, title: '参加审计业务培训会议', project: '通用', priority: 'medium', completed: true },
            // { id: 5, title: '更新民生专项资金审计方案', project: '民生专项资金审计', priority: 'low', completed: false }
          ],
          priorityText: {
            high: '高优先级',
            medium: '中优先级',
            low: '低优先级'
          },
          currentDate: ''
    }
  },
  computed: {
        pendingTodosCount() {
          return this.todos.filter(t => !t.completed).length;
        },
        unreadNoticesCount() {
          return this.notices.filter(n => !n.read).length;
        },
        pendingTodos() {
          return this.todos.filter(t => !t.completed);
        }
      },
      mounted() {
      this.getProject();
        this.formatDate();
      },
  methods: {
  formatDate() {
          const now = new Date();
          const year = now.getFullYear();
          const month = (now.getMonth() + 1).toString().padStart(2, '0');
          const day = now.getDate().toString().padStart(2, '0');
          const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
          const weekday = weekdays[now.getDay()];
          
          this.currentDate = `${year}年${month}月${day}日 ${weekday}`;
        },
        
        openApp(app) {
          // this.$message({
          //   message: `正在打开应用: ${app.name}`,
          //   type: 'success',
          //   duration: 1500
          // });
          if(app.id==1){
            this.$router.push({ path: '/audit/index' })
          }else if(app.id==2){
            window.open(this.$router.resolve({ path: '/setting', query: {}  }).href, '_blank');
          }else if(app.id==3){
            this.$router.push({ path: '/government' })
          }else if(app.id==4){
            window.open(config.knowledgeUrl, '_blank');
          }else if(app.id==5){
            window.open(this.$router.resolve({ path: '/aichat' }).href, '_blank');
          }else{}
        },
        
        toggleTodo(todo) {
          const status = todo.completed ? '已完成' : '待处理';
          this.$message({
            message: `任务 "${todo.title}" 状态已更新为: ${status}`,
            type: 'success',
            duration: 1500
          });
        },
    handleProjectChange(value) {
          // 查找选中的项目
          const findProject = (projects, id) => {
            for (const project of projects) {
              if (project.id === id) {
                return project;
              }
              if (project.children) {
                const found = findProject(project.children, id);
                if (found) return found;
              }
            }
            return null;
          };
          
          const selected = findProject(this.projects, value);
          if (selected) {
            console.log(123,this.selectedProject);
            console.log('选中的项目ID:', selected.id);
            console.log('选中的项目名称:', selected.projectName);
            localStorage.setItem("projectId",selected.id)
            // 显示成功消息
            this.$message({
              message: `已切换项目: ${selected.projectName}`,
              type: 'success',
              duration: 3000
            });
          }
        },
    getProject(){
      this.$axios.get('/api/services/hzsfjtai/project/treeList', {}).then(res => {
            if (res.data.code === 200) {
              this.projects =res.data.data.map(item => ({
                ...item,
                parentId: item.value == null ? 0 : item.value
              }));
              this.deleteChildren(this.projects);
              console.log(89,this.projects);
              this.selectedProject=localStorage.getItem('projectId')?Number(localStorage.getItem('projectId')):''
            } else {
              this.$message(res.data.msg)
            }
          }).catch(err => {
            this.$message.error(err)
          })
    },
    deleteChildren(arr) {
      let childs = arr
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].children) {
          if (childs[i].children.length) {
            this.deleteChildren(childs[i].children)
          } else {
            delete childs[i].children
          }
        }
      }
      return arr
    },
    goto (path) {
      this.$router.push({ path: path })
    },
    jumpUrl(){
      window.open(config.knowledgeUrl, '_blank');
    },
    jumpAi(){
      window.open(this.$router.resolve({ path: '/aichat' }).href, '_blank');
    },
    handleSelect(){
      window.open(this.$router.resolve({ path: '/setting', query: {}  }).href, '_blank');
    },
    handleSelect2(index,path){
      console.log(123,index);
    },
  }
}
</script>



<style lang="less" scoped>
    .header {
      background: linear-gradient(135deg, #1a56db 0%, #0e3aaa 100%);
      color: white;
      padding: 0 40px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    
    .logo-area {
      display: flex;
      align-items: center;
    }
    
    .logo {
      width: 45px;
      height: 45px;
      background: linear-gradient(45deg, #409EFF, #66b1ff);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
    }
    
    .logo svg {
      width: 24px;
      height: 24px;
      fill: white;
    }
    
    .title {
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 1px;
    }
    
    .title span {
      color: #66b1ff;
    }
    
    .header-right {
      display: flex;
      align-items: center;
      gap: 25px;
    }
    
    .project-selector {
      width: 260px;
    }
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }
    
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(45deg, #67c23a, #85ce61);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }
    
    .user-name {
      font-size: 16px;
      font-weight: 500;
    }
    
    /* 主内容区 */
    .main-container {
      max-width: 1400px;
      margin: 30px auto;
      padding: 0 20px;
    }
    
    .welcome-card {
      background: linear-gradient(120deg, #1a56db 0%, #0e3aaa 100%);
      border-radius: 12px;
      padding: 30px 40px;
      color: white;
      margin-bottom: 30px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
      position: relative;
      overflow: hidden;
    }
    
    .welcome-card::before {
      content: "";
      position: absolute;
      top: -50px;
      right: -50px;
      width: 200px;
      height: 200px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
    }
    
    .welcome-card::after {
      content: "";
      position: absolute;
      bottom: -80px;
      right: 20px;
      width: 150px;
      height: 150px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 50%;
    }
    
    .welcome-title {
      font-size: 28px;
      margin-bottom: 10px;
      position: relative;
      z-index: 2;
    }
    
    .welcome-subtitle {
      font-size: 16px;
      opacity: 0.9;
      max-width: 600px;
      position: relative;
      z-index: 2;
    }
    
    .dashboard-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }
    
    .stat-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      transition: transform 0.3s;
    }
    
    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      font-size: 24px;
    }
    
    .icon-project {
      background: linear-gradient(45deg, #409EFF, #66b1ff);
      color: white;
    }
    
    .icon-todo {
      background: linear-gradient(45deg, #e6a23c, #ebb563);
      color: white;
    }
    
    .icon-notice {
      background: linear-gradient(45deg, #67c23a, #85ce61);
      color: white;
    }
    
    .icon-app {
      background: linear-gradient(45deg, #f56c6c, #f78989);
      color: white;
    }
    
    .stat-content {
      flex: 1;
    }
    
    .stat-title {
      font-size: 14px;
      color: #909399;
      margin-bottom: 5px;
    }
    
    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
    }
    
    /* 我的应用 - 优化部分 */
    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: #303133;
      margin: 30px 0 20px;
      padding-left: 10px;
      border-left: 4px solid #409EFF;
      display: flex;
      align-items: center;
    }
    
    .section-title .icon {
      margin-right: 10px;
      color: #409EFF;
      font-size: 24px;
    }
    
    .apps-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 25px;
      margin-bottom: 40px;
    }
    
    .app-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s;
      text-align: center;
      cursor: pointer;
      border: 1px solid #ebeef5;
      display: flex;
      flex-direction: column;
      height: 220px; /* 增加高度 */
    }
    
    .app-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 20px rgba(64, 158, 255, 0.2);
      border-color: #409EFF;
    }
    
    .app-icon {
      height: 130px; /* 增加高度 */
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(64, 158, 255, 0.08);
      position: relative;
      overflow: hidden;
    }
    
    .app-icon::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(64,158,255,0.15) 0%, rgba(64,158,255,0) 70%);
    }
    
    .app-icon svg {
      width: 64px; /* 增大图标尺寸 */
      height: 64px;
      fill: #409EFF;
      z-index: 2;
      transition: transform 0.3s;
    }
    
    .app-card:hover .app-icon svg {
      transform: scale(1.15);
    }
    
    .app-content {
      padding: 20px 15px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .app-name {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 8px;
      color: #303133;
    }
    
    .app-desc {
      font-size: 14px; /* 增大字体 */
      color: #909399;
      line-height: 1.4;
    }
    
    /* 通知公告和待办事项 */
    .dashboard-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-bottom: 40px;
    }
    
    .panel {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    .panel-header {
      padding: 20px;
      border-bottom: 1px solid #ebeef5;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .panel-title {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
      display: flex;
      align-items: center;
    }
    
    .panel-title .icon {
      margin-right: 10px;
      color: #409EFF;
    }
    
    .panel-more {
      color: #409EFF;
      font-size: 14px;
      cursor: pointer;
    }
    
    .panel-body {
      padding: 0;
    }
    
    .notice-item, .todo-item {
      padding: 18px 20px;
      border-bottom: 1px solid #f5f7fa;
      transition: background 0.3s;
      cursor: pointer;
    }
    
    .notice-item:hover, .todo-item:hover {
      background: #f5f9ff;
    }
    
    .notice-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 8px;
      color: #303133;
      display: flex;
      align-items: center;
    }
    
    .notice-title .icon {
      color: #67c23a;
      margin-right: 8px;
    }
    
    .notice-info {
      display: flex;
      font-size: 13px;
      color: #909399;
    }
    
    .notice-time {
      margin-right: 15px;
    }
    
    .todo-item {
      display: flex;
      align-items: center;
    }
    
    .todo-checkbox {
      margin-right: 15px;
    }
    
    .todo-content {
      flex: 1;
    }
    
    .todo-title {
      font-size: 16px;
      margin-bottom: 5px;
      color: #303133;
    }
    
    .todo-info {
      font-size: 13px;
      color: #909399;
      display: flex;
    }
    
    .todo-project {
      margin-right: 15px;
    }
    
    .todo-priority {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
    }
    
    .priority-high {
      background: #fef0f0;
      color: #f56c6c;
    }
    
    .priority-medium {
      background: #fdf6ec;
      color: #e6a23c;
    }
    
    .priority-low {
      background: #f0f9eb;
      color: #67c23a;
    }
    
    /* 页脚 */
    .footer {
      text-align: center;
      padding: 30px 0;
      color: #909399;
      font-size: 14px;
      border-top: 1px solid #ebeef5;
      margin-top: 30px;
      background: white;
    }
    
    .footer a {
      color: #409EFF;
      text-decoration: none;
    }
    
    .footer a:hover {
      text-decoration: underline;
    }
    
    /* 响应式调整 */
    @media (max-width: 992px) {
      .dashboard-columns {
        grid-template-columns: 1fr;
      }
    }
    
    @media (max-width: 768px) {
      .header {
        padding: 0 20px;
      }
      .title {
        font-size: 18px;
      }
      .project-selector {
        width: 180px;
      }
      .welcome-card {
        padding: 20px;
      }
      .welcome-title {
        font-size: 22px;
      }
      .apps-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes iconPulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    
    .fade-in {
      animation: fadeIn 0.6s ease-out forwards;
    }
    
    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }
    .delay-4 { animation-delay: 0.4s; }
    .delay-5 { animation-delay: 0.5s; }
    
    .app-card:hover .app-icon {
      animation: iconPulse 0.8s ease-in-out;
    }
  </style>

